<div id="job-city-chart" class="chart-div col-md-6"></div>

<script type="text/javascript">
    var jobCityChart = echarts.init(document.getElementById('job-city-chart'));
    // 指定图表的配置项和数据

    var option = {
        title: {
            text: '各城市职位占比',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [
                {% for item in city_jobs_counter[::-1] %}
                    '{{item[0]}}',
                {% end %}
            ]
        },
        series: [
            {
                name: '拉勾数据',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {% for item in city_jobs_counter[::-1] %}
                    {
                        value: '{{item[1]}}',
                        name: '{{item[0]}}'
                    },
                    {% end %}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    jobCityChart.setOption(option);
</script>